<template>
  <div>
        <!-- 面包屑导航栏 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
     
     <!-- 卡片区域 -->
     <el-card>
         <el-row>
             <el-col>
                 <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
             </el-col>
         </el-row>
         
         <!-- 表格内容 -->
      <tree-table :data="Catelist" :columns="columns" show-index index-text="#" 
      border :selection-type='false' :expand-type='false' :show-row-hover="false"
      class="treeTable">
      <!-- 是否有效 -->
       <template slot="isok" slot-scope="scope">
        <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:green"></i>
        <i class="el-icon-error" v-else  style="color:red"></i>
       </template>
       <!-- 排序 -->
       <template slot="order" slot-scope="scope">
           <el-tag size="mini" v-if="scope.row.cat_level=== 0">一级</el-tag>
           <el-tag type="success" size="mini" v-else-if="scope.row.cat_level=== 1">二级</el-tag>
           <el-tag type="warning" size="mini" v-else>三级</el-tag>
       </template>
       <!-- 操作 -->
       <template slot="opt" slot-scope="scope"> 
           <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
           <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
       </template>
      </tree-table>
  

         <!-- 分页 -->
          <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.pagenum"
      :page-sizes="[3, 5, 10,15]"
      :page-size="queryinfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
     </el-card>

     <!-- 添加分类的对话框 -->
     <el-dialog
  title="提示"
  :visible.sync="addCateDialogVisible"
  width="50%"
  @close="addCateDialogClosed"
 >
  <el-form ref="addCateFormRef" :model="addCateForm"
   :rules="addCateFormRules" label-width="80px" >
  <el-form-item label="用户名" prop="cat_name">
    <el-input v-model="addCateForm.cat_name"></el-input>
  </el-form-item >
  <el-form-item label="父级分类" >
     <el-cascader
    v-model="selectedKeys"
    :options="ParentCateList"
    :props="cascaderProps"
    @change="parendCateChange" size="mini" ></el-cascader>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>
      
  </div>
</template>

<script>
export default {
   data() {
       return {
           queryinfo :  {
               type : 3,
               pagenum : 1,
               pagesize : 5
           } ,
            //商品分类数据
           Catelist : [],
           //数据总条数
           total : 0,
           //定义 tree表格
           columns : [{
               label : '分类名称',
               prop : "cat_name"
           },
           {
               label : '是否有效',
               //表示当前列为模板引擎
               type : 'template',
               //模板自定义名称
               template : 'isok'
           },
           {
               label : '排序',
               //表示当前列为模板引擎
               type : 'template',
               //模板自定义名称
               template : 'order'
           },
           {
               label : '操作',
               //表示当前列为模板引擎
               type : 'template',
               //模板自定义名称
               template : 'opt'
           },
           ],
           //控制添加对话框的开关
           addCateDialogVisible : false,
           //添加分类的数据
           addCateForm : {
               cat_name: '',
               //父级id
               cat_pid : 0,
               //分类层级默认添加1级分类
               cat_level :0
           },
           //添加校验规则
           addCateFormRules : {
               cat_name :[
                     { required: true, message: '请输入用户名称', trigger: 'blur' },
               ]
           },
           //父级分类的数据
           ParentCateList: [],
           //级联选择器的配置
           cascaderProps : {
               value : 'cat_id',
               label : 'cat_name',
               childeren : 'children',
               expandTrigger : "hover"
           },
           //选中父级分类的id
           selectedKeys :[]
       }
   },
   created () {
       this.getCatelest()
   },
   methods : {
       //获取商品分类数据
    async  getCatelest() {
        const {data:res} = await   this.$http.get('categories',{params : this.queryinfo})
        if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.Catelist = res.data.result
        this.total = res.data.total
        // console.log(res);
       },
       //监听pagesize 改变
       handleSizeChange(newSize) {
         this.queryinfo.pagesize = newSize
          this.getCatelest()
       },
       //监听pagesize改变
       handleCurrentChange(newPage) {
         
       this.queryinfo.pagenum = newPage
       this.getCatelest()
       },
       //添加分类
       showAddCateDialog() {
           //父级数据
           this.getParentCateList()
           this.addCateDialogVisible = true
       },
       //获取到父级分类的数据
    async   getParentCateList() {
       const {data:res} = await  this.$http.get('categories' ,{params : {type:2}})
       if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
       this.ParentCateList = res.data
    //    console.log(res.data);

       },
       //级联选择器的选中事件
       parendCateChange () {
         console.log(this.selectedKeys );
         if(this.selectedKeys.length > 0) {
             this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length -1 ]
         this.addCateForm.cat_level = this.selectedKeys.length
         } else {
              this.addCateForm.cat_pid = 0
               this.addCateForm.cat_level= 0
         }
         
       } ,
       //添加分类
       addCate()  {
           console.log(this.addCateForm);
         this.$refs.addCateFormRef.validate(async valid => {
             if(!valid) return
        const {data:res} = await this.$http.post('categories',this.addCateForm)
         if(res.meta.status !== 201) return this.$message.error(res.meta.msg)
         this.$message.success(res.meta.msg)
          this.getCatelest()
          this.addCateDialogVisible = false
         
         })
       },
       //添加对话框的点击事件
       addCateDialogClosed() {
        //    console.log(11);
           this.$refs.addCateFormRef.resetFields()
           this.selectedKeys = 0
            this.addCateForm.cat_pid = 0
               this.addCateForm.cat_level= 0
       }
   }
}
</script>

<style lang="less" scoped>
  .treeTable{
      margin-top: 15px;
  }
  .el-cascader {
      width: 100%;
  }
 
 
</style>>

